<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>
<%@ taglib prefix="idy" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<idy:bs-iris-header title_webpage="title.registration">
	<link rel="stylesheet" type="text/css" href="${url_style}/iris-registration.css" />
</idy:bs-iris-header>

<div class="page-body">
	<div class="form-box-title"><h4>Registration: Information & Contact Details</h4></div>
	<hr/>
	<form:form commandName="patient" method="POST" id="registration-form" cssClass="form-horizontal">
		<spring:bind path="patient.*">
			<c:if test="${status.error}">
				<div class='alert alert-error form-error'>
					<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Oh snap!</strong><br />
					<form:errors path="*" />
				</div>
			</c:if>
		</spring:bind>
	
		<div class="form-box-title"><h5>Basic Information</h5></div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.firstName"/></label>
			<div class="controls">
				<form:input path="firstName" autocomplete="off"/><span class="required-field">*</span>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.lastName"/></label>
			<div class="controls">
				<form:input path="lastName" autocomplete="off"/><span class="required-field">*</span>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.middleName"/></label>
			<div class="controls">
				<form:input path="middleName" autocomplete="off"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.nickname"/></label>
			<div class="controls">
				<form:input path="nickname" autocomplete="off"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.gender"/></label>
			<div class="controls">
				<c:forEach items="${genders}" var="gender">
					<label class="radio inline">
						<input type="radio" name="gender" class="optionsRadio" value="${gender.id}" <c:if test='${patient.gender.id eq gender.id}'>checked="checked"</c:if>/>
						${gender.value}
					</label>
				</c:forEach>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.birthdate"/></label>
			<div class="controls">
				<div class="input-append">
					<input type="text" id="birthdate" name="birthdate" value="<fmt:formatDate value='${patient.birthdate}' pattern="MM/dd/yyyy"/>" autocomplete="off"/><span class="required-field">*</span>
					<span class="add-on"><i class="icon-calendar"></i></span>
				</div>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.address" /></label>
			<div class="controls">
				<form:textarea path="address" cssClass="wide"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.email-address" /></label>
			<div class="controls">
				<form:input path="emailAddress" autocomplete="off"/>
			</div>
		</div>
		
		<hr/>
		
		<div class="form-box-title"><h5>Contact Numbers</h5></div>
		<div style="display: none">
			<select id="number-types-sample">
				<c:forEach items="${numberTypes}" var="type">
					<option value="${type.id}">${type.value}</option>
				</c:forEach>
			</select>
		</div>
		<div id="dynamic-field-list" class="control-group">
			<c:choose>
				<c:when test="${empty patient.contactNumbers}">
					<div class="dynamic-field contact-number-counter">
						<select class="short" name="contactNumbers[0].type">
							<c:forEach items="${numberTypes}" var="type">
								<option value="${type.id}">${type.value}</option>
							</c:forEach>
						</select>
						<input type="text" name="contactNumbers[0].number" autocomplete="off"/>
						<input type="hidden" name="contactNumbers[0].isDeleted" value="false">
						<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
					</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${patient.contactNumbers}" var="contactNumber" varStatus="status">
						<div class="dynamic-field contact-number-counter" <c:if test="${contactNumber.isDeleted}">style="display: none;"</c:if>>
							<select class="short" name="contactNumbers[${status.index}].type">
								<c:forEach items="${numberTypes}" var="type">
									<option value="${type.id}" <c:if test='${type.id eq contactNumber.type.id}'>selected="selected"</c:if>>${type.value}</option>
								</c:forEach>
							</select>
							<input type="text" name="contactNumbers[${status.index}].number" autocomplete="off" value="${contactNumber.number}"/>
							<input type="hidden" name="contactNumbers[${status.index}].isDeleted" value="${contactNumber.isDeleted}">
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</div>
		
	
		<div class="alert alert-info alert-shorter">
			<strong>Heads up! </strong>You can add multiple contact numbers by clicking &nbsp;&nbsp;<a id="new-contact-number" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New contact number</a>
		</div>
		
		<div class="control-group">
			<div class="controls">
				<input type="submit" value="Proceed" name="_target1" id="submit-button" class="btn btn-primary"/>
			</div>
		</div>
		
	</form:form>
</div>

<idy:bs-iris-footer>
<script type="text/javascript">
	$(document).ready(function(){
		$('#birthdate').datepicker({
			yearRange: "-80:+0",
			changeMonth: true,
		    changeYear: true
		});
		
		var contactNumberSample = $('#number-types-sample').html();
		
		$('#new-contact-number').click(function(){
			var contactNumberCounter = $('.contact-number-counter').size();
			$('#dynamic-field-list').append('<div class="dynamic-field contact-number-counter"><select class="short" name="contactNumbers['+contactNumberCounter+'].type">'+contactNumberSample+'</select> <input type="text" name="contactNumbers['+contactNumberCounter+'].number" autocomplete="off"/> <input type="hidden" name="contactNumbers['+contactNumberCounter+'].isDeleted" value="false"><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
		});
		
		$('.remove').live("click", function(){
			$(this).prev().val("true");
			$(this).parent().fadeOut();
		});
		
		
		
		<c:if test="${empty patient.gender}">
			$('input[name=gender]:nth(0)').attr("checked","checked");
		</c:if>
	});
</script>
</idy:bs-iris-footer>